<html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main" />
    <title>eventos</title>

    <g:javascript src="jquery/ui.dialog.js"/>
    <g:javascript src="weekcalendar/calendario.js"/>

    </head>
    
    <body>
            <h1>eventos semana</h1>

            <div id='loading' style='display:none'>loading...</div>

            <g:select optionKey="id" from="${com.asisto.model.Empleado.list()}" name="empleado.id" ></g:select>


            <div id="mensaje"></div>
            
            <div id='calendar'></div>

            <div id="event_edit_container">
            <g:form action="creaEvento" method="post" >

			<ul>
				<li>
					<span>Date: </span><span class="date_holder"></span>
				</li>
				<li>
					<label for="start">Inicio: </label><select name="start"><option value="">--selecciona inicio</option></select>
				</li>
				<li>
					<label for="end">Fin: </label><select name="end"><option value="">--selecciona fin</option></select>
				</li>
				<li>
					<label for="title">Title: </label><input type="text" name="title" />
				</li>
				<li>
					<label for="body">Body: </label><textarea name="body"></textarea>
				</li>
			</ul>

            </g:form>

        <!--
		<form>
			<input type="hidden" />
			<ul>
				<li>
					<span>Date: </span><span class="date_holder"></span>
				</li>
				<li>
					<label for="start">Start Time: </label><select name="start"><option value="">Select Start Time</option></select>
				</li>
				<li>
					<label for="end">End Time: </label><select name="end"><option value="">Select End Time</option></select>
				</li>
				<li>
					<label for="title">Title: </label><input type="text" name="title" />
				</li>
				<li>
					<label for="body">Body: </label><textarea name="body"></textarea>
				</li>
			</ul>
		</form>
        -->
	</div>

	<div id="about">
		<h2>Summary</h2>
		<p>
			This calendar implementation demonstrates further usage of the calendar with editing and deleting of events.
			It stops short however of implementing a server-side backend which is out of the scope of this plugin. It
			should be reasonably evident by viewing the demo source code, where the points for adding ajax should be.
			Note also that this is **just a demo** and some of the demo code itself is rough. It could certainly be
			optimised.
		</p>
		<h2>Demonstrated Features</h2>
		<p>
			This calendar imlementation demonstrates the following features:
		</p>
		<ul class="formatted">
			<li>Adding, updating and deleting of calendar events using jquery-ui dialog. Also includes
				additional calEvent data (body field) not defined by the calEvent data structure to show the storage
				of the data within the calEvent</li>
			<li>Dragging and resizing of calendar events</li>
			<li>Restricted timeslot rendering based on business hours</li>
			<li>Allowing calEvent overlap with staggered rendering of overlapping events</li>
			<li>Use of the 'getTimeslotTimes' method to retrieve valid times for a given event day. This is used to populate
				select fields for adding, updating events.</li>
			<li>Use of the 'eventRender' callback to add a different css class to calEvents in the past</li>
			<li>Use of additional calEvent data to enforce readonly behaviour for a calendar event. See the event
				titled "i'm read-only"</li>
		</ul>
	</div>

            
  </body>
</html>
